<template>
  <view class="outBox">
    <u-navbar leftText="点单" leftIconColor="#fff" :autoBack="false" bgColor="rgba(0, 0, 0, 0.6)">
      <view class="left-slot" slot="left" @click="backHome">
        <u-icon name="arrow-left" color="#fff"></u-icon>
        <text>{{ '点单' }}</text>
      </view>
    </u-navbar>
    <video :src="videoUrl + '/mp4/1.mp4'" autoplay :controls="false" loop
           object-fit="cover"></video>
    <view class="innerBox">
      <view class="content" :style="{
			marginTop:menuHeight + 'px',
		}">
        <scroll-view style="height: 100%" :scroll-top="scrollTop" scroll-y="true" class="left">
          <view class="item" :class="[typeIndex == -1 ? 'active' : '']" @click="clickTaoCan">
            <text>套餐</text>
          </view>
          <view class="item" :class="[typeIndex == index ? 'active' : '']" @click="getGoodsList(index)"
                v-for="(item,index) in typeList">
            {{item.typeName}}
          </view>
        </scroll-view>
        <view class="right" >
          <!-- 	<view class="searchBox">
            <u-search placeholder="请输入名称" v-model="searchValue" :showAction="false"></u-search>
          </view> -->
          <scroll-view :scroll-top="scrollTop" scroll-y="true" class="items">
            <view class="item" :style="{
              backgroundImage:`url(${bg})`
            }" v-for="item in dataList" @click="handleDetails(item)">
              <image :src="item.productPicPath" mode=""></image>
              <view class="info">
                <view class="title">
                  <text>{{item.productName}}</text>
                </view>
                <view class="price">
                  <text>¥ {{item.productSellingPrice}}</text>
                  <view class="operation">
                    <!--                    <u-icon name="minus-circle" color="#f96f45" v-if="item.choiceNum > 0"-->
                    <!--                            @click.stop="handleDecrease(item)" size="22"></u-icon>-->
                    <image src="/static/order/icon3.png"  v-if="item.choiceNum > 0"
                           @click.stop="handleDecrease(item)" mode="widthFix"/>
                    <text v-if="item.choiceNum > 0">{{item.choiceNum}}</text>
                    <!--                    <u-icon name="plus-circle" color="#f96f45" size="22"-->
                    <!--                            @click.stop="handleIncrease(item)"></u-icon>-->
                    <image src="/static/order/icon2.png"
                           @click.stop="handleIncrease(item)"  mode="widthFix"/>
                  </view>
                </view>
              </view>
            </view>

          </scroll-view>


          <!-- 	<view class="cartBtn" @click="getnav('/pages/order/cart')">
            <view class="circle">
              <text>{{carNum}}</text>
            </view>
            <image src="../../static/order/icon1.png" mode="widthFix"></image>
          </view> -->
        </view>
      </view>
      <view class="footer">
        <view class="left">
          <view class="cart">
            <view class="circle">
              <text>{{getCartInfo().num}}</text>
            </view>
            <image src="/static/order/icon4.png" mode="widthFix"></image>
          </view>
          <view class="price">
            <text>¥ {{getCartInfo().price}}</text>
          </view>
        </view>
        <view class="btnOut">
          <view class="btn" @click="handleSuc">
            <text>下单结算</text>
          </view>
        </view>
      </view>
    </view>
    <diaBox ref="diaBoxRef" title="套餐详情" :show-btns="false">
      <template v-slot:dia-cont>
        <view class="diaCont">
          <view class="items">
            <view class="item one">
              <text>套餐</text>
              <text>数量</text>
            </view>
            <view class="item" v-for="item in tcList">
              <text>{{item.productName}}</text>
              <text>X{{item.num}}</text>
            </view>
          </view>
        </view>
      </template>
    </diaBox>
    <!--		<u-popup :show="showDia" mode="center" :customStyle="{-->
    <!--			background:'transparent'-->
    <!--		}">-->
    <!--			<view class="diaBox">-->
    <!--				<view class="title">-->
    <!--					<text>套餐详情</text>-->
    <!--					<u-icon @click="showDia = false" name="close" color="#939393" size="25"></u-icon>-->
    <!--				</view>-->
    <!--				<view class="items">-->
    <!--					<view class="item">-->
    <!--						<view class="label">-->
    <!--							<text>套餐</text>-->
    <!--						</view>-->
    <!--						<view class="value">-->
    <!--							<text>数量</text>-->
    <!--						</view>-->
    <!--					</view>-->
    <!--					<view class="item" v-for="item in tcList">-->
    <!--						<view class="label">-->
    <!--							<text>{{item.productName}}</text>-->
    <!--						</view>-->
    <!--						<view class="value">-->
    <!--							<text>x{{item.num}}</text>-->
    <!--						</view>-->
    <!--					</view>-->
    <!--				</view>-->
    <!--			</view>-->
    <!--		</u-popup>-->
    <userLogin ref="userLoginRef" />
  </view>
</template>

<script>
import {
  getWXStatusHeight
} from '@/utils/index.js'

import bg from "@/static/mine/bg2.png";

import {
  getGoodsTypeListApi,
  getGoodsListApi,
  getTCGoodsListApi,
  findDetailListApi
} from '../../api/api';
import diaBox from "@/components/diaBox/index.vue";
export default {
  components: {diaBox},
  data() {
    return {
      bg: bg,
      // 胶囊的宽度
      barWidth: 0,
      barHeight: 0,
      searchValue: '', // 搜索值
      carNum: 0,
      menuHeight: 0,
      // 商品类型列表
      typeList: [],
      // 类型下标
      typeIndex: 0,
      // 商品列表
      dataList: [],
      choiceDataList: [],
      // 桌号
      counterNo: '',
      videoUrl: this.$videoUrl,
      showDia: false,
      tcList: [], // 套餐内容列表
    }
  },
  async onLoad(e) {
    if (e.q) {
      let codeStr = decodeURIComponent(e.q)
      const urlObj = this.getParamobj(codeStr)
      if (!urlObj.counterNo) return this.$toast("counterNo为空")
      this.counterNo = urlObj.counterNo
    }

    if (e.counterNo) this.counterNo = e.counterNo
    let obj = getWXStatusHeight()
    this.barWidth = obj.barWidth + 3
    this.menuHeight = obj.menuHeight
    // uni.removeStorageSync("choiceDataList")
    const isLogin = this.getIsLogin()

    if (isLogin) {
      this.initData()
    }
  },
  async onShow() {
    this.initData()
    if (this.typeIndex == -1) {
      await this.clickTaoCan()
    } else {
      await this.getTypeList()
    }
  },
  methods: {
    // 查看详情
    async handleDetails(item) {
      if (this.typeIndex != -1) return
      const res = await findDetailListApi(item.id)
      console.log(res, "res");
      if (res.code == 200) {
        this.tcList = res.data
        this.$refs.diaBoxRef.show = true
      }
    },
    backHome() {
      uni.switchTab({
        url: "/pages/home/index"
      })
    },
    // 获取登陆信息
    getIsLogin() {
      if (!uni.getStorageSync('token') || (uni.getStorageSync('userInfo') == "null" || !uni.getStorageSync(
          "userInfo"))) {
        // if (!uni.getStorageSync('token')){
        uni.setStorageSync('showLogin', true)
        this.$refs.userLoginRef.showLogin = true
        return false
      }
      return true
    },
    getParamobj(path) { //根据url里的参数，全部转换为obj
      if (path.split("#/?").length > 1) {
        if (path.split("?").length > 1) {
          var params = path.split("?")[1].split("&")
          var obj = {}
          params.map(item => obj[item.split("=")[0]] = item.split("=")[1])
          return obj;
        } else return '';
      } else {
        if (path.split("#").length > 1) {
          path = path.split('#')[0];
        }
        if (path.split("?").length > 1) {
          var params = path.split("?")[1].split("&")
          var obj = {}
          params.map(item => obj[item.split("=")[0]] = item.split("=")[1])
          return obj;
        } else return '';
      }
    },
    // 下单结算
    handleSuc() {
      let dataList = uni.getStorageSync("choiceDataList")
      if(dataList){
        dataList = dataList.filter(item => item.choiceNum > 0)
      }
      if(!dataList) return this.$toast("请选择商品")
      if (dataList.length == 0) return this.$toast("请选择商品")
      uni.setStorageSync("choiceDataList", dataList)
      this.getnav("details?counterNo=" + this.counterNo)
    },
    // 获取购物车信息
    getCartInfo() {
      const obj = {
        num: 0,
        price: 0
      }
      this.choiceDataList.forEach(item => {
        obj.num += item.choiceNum
        obj.price += item.choiceNum * item.productSellingPrice
      })
      return obj
    },
    // 改变购物车列表
    changeChoiceData(item, type) {
      let obj = this.choiceDataList.find(one => one.id == item.id)
      if (type == 1) {
        if (obj) {
          obj.choiceNum += 1
        } else {
          obj = {
            ...item,
            choiceNum: 1
          }
          this.choiceDataList.push(obj)
        }
      } else {
        obj.choiceNum -= 1
      }

      uni.setStorageSync("choiceDataList", this.choiceDataList)
    },
    // 增加
    handleIncrease(item) {
      if (item.choiceNum >= item.productStock) return this.$toast("当前库存不足")
      item.choiceNum += 1
      this.changeChoiceData(item, 1)
    },
    // 减少商品
    handleDecrease(item) {
      if (item.choiceNum == 0) return
      item.choiceNum -= 1
      this.changeChoiceData(item, 2)
    },
    // 初始化选中列表
    initData() {
      this.choiceDataList = uni.getStorageSync("choiceDataList") || []
    },
    // 获取套餐列表
    async clickTaoCan() {
      this.typeIndex = -1
      const res = await getTCGoodsListApi()
      if (res.code == 200) {
        this.dataList = res.data.map(item => {
          const choice = this.choiceDataList.find(choice => choice.id == item.id)
          return {
            id: item.id,
            relaType: 2,
            productSellingPrice: item.packageSellingPrice,
            productName: item.packageName,
            productPicPath: item.packagePicPath,
            choiceNum: choice?.choiceNum ? choice.choiceNum : 0,
          }
        })
      }
    },
    // 获取类型列表
    async getTypeList() {
      const res = await getGoodsTypeListApi()
      if (res.code == 200) {
        this.typeList = res.data
        await this.getGoodsList(this.typeIndex)
      }
    },
    // 获取商品列表
    async getGoodsList(index) {
      console.log(this.typeList, "this.typeList");
      console.log(this.typeList[index], "this.typeList[index]");
      const data = {
        typeId: this.typeList[index].id
      }
      this.typeIndex = index
      const res = await getGoodsListApi(data)
      if (res.code == 200) {
        this.dataList = res.data.map(item => {
          console.log(this.choiceDataList, "this.choiceDataList");
          const choice = this.choiceDataList.find(choice => choice.id == item.id)
          console.log(choice, "choicechoice");
          return {
            ...item,
            relaType: 1,
            choiceNum: choice?.choiceNum ? choice.choiceNum : 0,
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.diaCont{
  margin-top: 52rpx;
  .items{
    border-radius: 22rpx;
    border: 2rpx solid #979797;
    overflow: hidden;
    .item{
      padding: 0 68rpx;
      display: flex;
      justify-content: space-between;
      font-weight: 400;
      font-size: 28rpx;
      line-height: 32rpx;
      text-align: center;
      font-style: normal;
      color: #fff;
      margin: 0 !important;
      line-height: 84rpx;
      &:nth-child(2n){
        background: #2d2e33;
      }
    }
    .one{
      color: #86909C;
    }
  }
}
.diaBox {
  background: rgba(38, 42, 74, 0.8);
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  border: 2rpx solid #5D617E;
  width: 90vw;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 确保视频填充整个容器，可能会裁剪视频 */
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 180rpx;
  padding: 0 46rpx;
  position: relative;
  z-index: 9;
  background: rgba(0, 0, 0, 0.6);
  border-image: linear-gradient(164deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.16)) 2 2;
  .left {
    display: flex;

    .price {
      font-size: 36rpx;
      margin-left: 50rpx;
      display: flex;
      align-items: center;

      text {
        font-weight: 500;
        font-size: 41rpx;
        color: #FFFFFF;
        line-height: 59rpx;
        text-align: left;
        font-style: normal;
      }
    }

    .cart {
      position: relative;

      .circle {
        position: absolute;
        right: 0;
        top: 0;
        width: 26rpx;
        height: 26rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        text {
          font-size: 18rpx;
          color: #fff;
        }
      }
    }

    image {
      width: 76rpx;
    }
  }
  .btnOut{
    border-radius: 64rpx;
    box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(15, 198, 194, 0.25);
  }
  .btn {
    width: 212rpx;
    height: 80rpx;
    box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;
    border-radius: 64rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2bafad;
    text {
      font-size: 32rpx;
      color: #fff;
    }
  }
}

.operation {
  display: flex;
  image{
    width: 36rpx;
  }
  text {
    width: 55rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
  }
}

.circle {
  position: absolute;
  width: 40rpx;
  height: 40rpx;
  background: #FF6048;
  box-shadow: inset 0rpx 0rpx 12rpx 0rpx rgba(255,255,255,0.5);
  color: #fff;
  border-radius: 50%;
  right: 20rpx;
  top: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cartBtn {
  position: fixed;
  right: 50rpx;
  bottom: 50rpx;
  width: 140rpx;
  height: 140rpx;
  background-color: #66AA0B;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;

  image {
    width: 72rpx;
  }
}

.content {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex: 1;
  z-index: 9;
  min-height: 0;
  background: rgba(0, 0, 0, 0.6);
  padding-top: 38rpx;
  box-sizing: border-box;
  .right {
    flex: 1;
    min-height: 0;
    margin-left: 18rpx;
    display: flex;
    flex-direction: column;
    .searchBox {
      margin-bottom: 20rpx;
    }

    .items {
      flex: 1;
      min-height: 0;
      .item {
        padding: 30rpx;
        margin-bottom: 18rpx;
        display: flex;
        background-size: 100% 100%;

        image {
          width: 120rpx;
          height: 120rpx;
          margin-right: 20rpx;
          border-radius: 20rpx;
        }

        .info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 10rpx 0;
          margin-left: 36rpx;

          .title {
            font-size: 36rpx;
            color: #fff;
          }

          .price {
            font-weight: 500;
            font-size: 28rpx;
            color: #0FC6C2;
            line-height: 28rpx;
            text-align: left;
            font-style: normal;
            display: flex;
            justify-content: space-between;
            image{
              width: 36rpx;
              margin: 0 !important;
            }
          }
        }
      }
    }

  }

  .left {
    width: 168rpx;
    background: rgba(0,0,0,0.22);
    border-radius: 0rpx 36rpx 0rpx 0rpx;
    border: 2rpx solid #233235;
    overflow: hidden;
    backdrop-filter: blur(7px);
    .item {
      line-height: 80rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #86909C;
      font-style: normal;
      text-align: center;
    }

    .active {
      background: linear-gradient( 270deg, #0FC6C2 0%, rgba(15,198,194,0) 100%);
      opacity: 0.62;
      color: #fff;
    }
  }
}

.left-slot {
  color: #fff;
  display: flex;
  align-items: center;
  image {
    width: 40rpx;
    margin-right: 30rpx;
  }
}
.innerBox{
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
}
.outBox {
  background-color: #1d1e2e;
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
}
</style>
